<!DOCTYPE HTML>
<html lang="en"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:wc="http://googlecode.com/wickedcharts">
  <head>
    <meta charset="utf-8" />
    <title>Wicked Charts :: Showcase :: JSF 2.1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="wicked charts" />
    <meta name="keywords" content="wicked charts,jsf,highcharts" />
    <meta name="author" content="Matthias Balke, Tom Hombergs" />

    <!-- Le styles -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
      .modal {
        width: 800px;
        left: 44%;
        top: 36%;
      }
      .modal-body {
        max-height: 560px;
      }
      
      .modal.fade.in {
        top: 36%;
      }
    </style>
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="css/wickedcharts.css" rel="stylesheet" />
	<!--[if gte IE 9]>
	  <style type="text/css">
	    .gradient {
	       filter: none;
	    }
	  </style>
	<![endif]-->
	<link href="css/syntaxhighlighter/shCoreEclipse.css" rel="stylesheet" type="text/css" />
	<link href="css/syntaxhighlighter/shThemeEclipse.css" rel="stylesheet" type="text/css" />

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico" />

    <script type="text/javascript" src="js/jquery-1.8.3.min-IEfix.js"></script>
    
	<script type="text/javascript" src="http://code.highcharts.com/2.3.5/highcharts.js"></script>
	<script type="text/javascript" src="http://code.highcharts.com/2.3.5/highcharts-more.js"></script>
	<script type="text/javascript" src="http://code.highcharts.com/2.3.5/modules/exporting.js"></script>
	<script type="text/javascript">
	/*<![CDATA[*/
    $(function() {
      new Highcharts.Chart({
	  "chart" : {
	    "renderTo" : "chart",
	    "type" : "spline"
	  },
	  "series" : [ {
	    "name" : "Hestavollane",
	    "data" : [ 4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1, 7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4, 8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5, 7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2, 3.0, 3.0 ]
	  }, {
	    "name" : "Voll",
	    "data" : [ 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0, 0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3, 3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4 ]
	  } ],
	  "title" : {
	    "text" : "Wind speed during two days"
	  },
	  "subtitle" : {
	    "text" : "October 6th and 7th 2009 at two locations in Vik i Sogn, Norway"
	  },
	  "xAxis" : {
	    "type" : "datetime"
	  },
	  "yAxis" : {
	    "title" : {
	      "text" : "Wind speed (m/s)"
	    },
	    "alternateGridColor" : null,
	    "gridLineWidth" : 0,
	    "min" : 0,
	    "minorGridLineWidth" : 0,
	    "plotBands" : [ {
	      "color" : "rgba(68,170,213,0.10)",
	      "from" : 0.3,
	      "to" : 1.5,
	      "label" : {
	        "text" : "Light air"
	      }
	    }, {
	      "color" : "rgba(0,0,0,0.00)",
	      "from" : 1.5,
	      "to" : 3.3,
	      "label" : {
	        "text" : "Light breeze"
	      }
	    }, {
	      "color" : "rgba(68,170,213,0.10)",
	      "from" : 3.3,
	      "to" : 5.5,
	      "label" : {
	        "text" : "Gentle breeze"
	      }
	    }, {
	      "color" : "rgba(0,0,0,0.00)",
	      "from" : 5.5,
	      "to" : 8.0,
	      "label" : {
	        "text" : "Moderate breeze"
	      }
	    }, {
	      "color" : "rgba(68,170,213,0.10)",
	      "from" : 8.0,
	      "to" : 11.0,
	      "label" : {
	        "text" : "Fresh breeze"
	      }
	    }, {
	      "color" : "rgba(0,0,0,0.00)",
	      "from" : 11.0,
	      "to" : 14.0,
	      "label" : {
	        "text" : "Strong breeze"
	      }
	    }, {
	      "color" : "rgba(68,170,213,0.10)",
	      "from" : 14.0,
	      "to" : 15.0,
	      "label" : {
	        "text" : "High wind"
	      }
	    } ]
	  },
	  "plotOptions" : {
	    "spline" : {
	      "pointInterval" : 3600000,
	      "pointStart" : 1254843376227,
	      "states" : {
	        "hover" : {
	          "lineWidth" : 5
	        }
	      },
	      "lineWidth" : 4,
	      "marker" : {
	        "enabled" : false,
	        "states" : {
	          "hover" : {
	            "enabled" : true,
	            "lineWidth" : 1,
	            "radius" : 5,
	            "symbol" : "circle"
	          }
	        }
	      }
	    }
	  },
	  "navigation" : { }
	});;});
	/*]]>*/
	</script>
  </head>

  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="">WickedCharts</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="">Showcase</a></li>
              <li><a href="http://code.google.com/p/wicked-charts/">GoogleCode</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div id="bannerContainer" class="gradient">
      <div class="row-fluid">
        <div class="span12 grid">
		  <div id="banner">
            <h1>Wicked Charts</h1>
            <p>version&#160;<h:outputText value="#{propertiesLoader.projectVersion}" /> :: <h:outputText value="#{propertiesLoader.jsfImplementation}" />&#160;<h:outputText value="#{propertiesLoader.jsfImplementationVersion}" /></p>
          </div>
        </div>
      </div>
	</div>
	<div class="container-fluid">
		<br />
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
			<h:form>
            <ul class="nav nav-list">
              <li class="nav-header">Line and scatter charts</li>
              <!-- basic line is not included in highcharts.com demos -->
              <li><h:commandLink action="#{showcase.selectBasicLineOptions}" value="Basic Line" /></li>
              <li class="disabled"><a href="#" onclick="return false">Ajax loaded data, clickable points</a></li>
              <li><h:commandLink action="#{showcase.selectLineWithDataLabelsOptions}" value="With data labels" /></li>
              <li><h:commandLink action="#{showcase.selectZoomableTimeSeriesOptions}" value="Time series, zoomable" /></li>
              <li><h:commandLink action="#{showcase.selectSplineWithInvertedAxisOptions}" value="Spline with inverted axes" /></li>
              <li><h:commandLink action="#{showcase.selectSplineWithSymbolsOptions}" value="Spline with symbols" /></li>
              <li><h:commandLink action="#{showcase.selectSplineWithPlotBandsOptions}" value="Spline with plot bands" /></li>
              <li><h:commandLink action="#{showcase.selectTimeDataWithIrregularIntervalsOptions}" value="Time data with irregular intervals" /></li>
              <li><h:commandLink action="#{showcase.selectLogarithmicAxisOptions}" value="Logarithmic axis" /></li>
              <li><h:commandLink action="#{showcase.selectScatterOptions}" value="Scatter plot" /></li>

              <li class="nav-header">Area charts</li>
              <li><h:commandLink action="#{showcase.selectBasicAreaOptions}" value="Basic Area" /></li>
              <li><h:commandLink action="#{showcase.selectAreaWithNegativeValuesOptions}" value="Area with negative values" /></li>
              <li><h:commandLink action="#{showcase.selectStackedAreaOptions}" value="Stacked area" /></li>
              <li><h:commandLink action="#{showcase.selectPercentageAreaOptions}" value="Percentage area" /></li>
              <li><h:commandLink action="#{showcase.selectAreaWithMissingOptions}" value="Area with missing points" /></li>
              <li><h:commandLink action="#{showcase.selectAreaWithInvertedAxisOptions}" value="Inverted axes" /></li>
              <li><h:commandLink action="#{showcase.selectAreaSplineOptions}" value="Area-spline" /></li>

              <li class="nav-header">Column and bar charts</li>
              <li><h:commandLink action="#{showcase.selectBasicBarOptions}" value="Basic bar" /></li>
              <li><h:commandLink action="#{showcase.selectStackedBarOptions}" value="Stacked bar" /></li>
              <li><h:commandLink action="#{showcase.selectBarWithNegativeStackOptions}" value="Bar with negative stack" /></li>
              <li><h:commandLink action="#{showcase.selectBasicColumnOptions}" value="Basic column" /></li>
              <li><h:commandLink action="#{showcase.selectColumnWithNegativeValuesOptions}" value="Column with negative values" /></li>
              <li><h:commandLink action="#{showcase.selectStackedColumnOptions}" value="Stacked column" /></li>
              <li><h:commandLink action="#{showcase.selectStackedAndGroupedColoumOptions}" value="Stacked and grouped column" /></li>
              <li><h:commandLink action="#{showcase.selectStackedPercentagetOptions}" value="Stacked percentage column" /></li>
              <li><h:commandLink action="#{showcase.selectColumnWithRotatedLabelsOptions}" value="Column with rotated labels" /></li>
              <li><h:commandLink action="#{showcase.selectColumnWithDrilldownOptions}" value="Column with drilldown" /></li>
              <li class="disabled"><a href="#" onclick="return false">Data defined in a HTML table</a></li>

              <li class="nav-header">Pie charts</li>
              <li><h:commandLink action="#{showcase.selectBasicPieOptions}" value="Pie chart" /></li>
              <li><h:commandLink action="#{showcase.selectPieWithGradientOptions}" value="Pie with gradient fill" /></li>
              <li><h:commandLink action="#{showcase.selectDonutOptions}" value="Donut chart" /></li>
              <li><h:commandLink action="#{showcase.selectPieWithLegendOptions}" value="Pie with legend" /></li>

              <li class="nav-header">Dynamic charts</li>
              <li class="disabled"><a href="#" onclick="return false">Spline updating each second</a></li>
              <li ><h:commandLink action="#{showcase.selectClickToAddPointOptions}" value="Click to add a point" /></li>
              <li class="disabled"><a href="#" onclick="return false">Master-detail chart</a></li>

              <li class="nav-header">Combinations</li>
              <li><h:commandLink action="#{showcase.selectComboOptions}" value="Column, Line and Pie" /></li>
              <li><h:commandLink action="#{showcase.selectDualAxesLineColumnOptions}" value="Dual axes, line and column" /></li>
              <li><h:commandLink action="#{showcase.selectMultipleAxesOptions}" value="Multiple axes" /></li>
              <li><h:commandLink action="#{showcase.selectScatterWithRegressionLineOptions}" value="Scatter with regression line" /></li>

              <li class="nav-header">More chart types</li>
              <li><h:commandLink action="#{showcase.selectAngularGaugeOptions}" value="Angular gauge" /></li>
              <li class="disabled"><a href="#" onclick="return false">Clock</a></li>
              <li class="disabled"><a href="#" onclick="return false">Gauge with dual axes</a></li>
              <li class="disabled"><a href="#" onclick="return false">VU meter</a></li>
              <li><h:commandLink action="#{showcase.selectAreaRangeOptions}" value="Area range" /></li>
              <li><h:commandLink action="#{showcase.selectColumnRangeOptions}" value="Column range" /></li>
              <li><h:commandLink action="#{showcase.selectPolarOptions}" value="Polar chart" /></li>
              <li><h:commandLink action="#{showcase.selectSpiderwebOptions}" value="Spiderweb" /></li>
              <li><h:commandLink action="#{showcase.selectWindroseOptions}" value="Wind rose" /></li>
              <li><h:commandLink action="#{showcase.selectBubbleChart}" value="Bubble Chart" /></li>
              <li class="disabled"><a href="#" onclick="return false">Client/Server interaction Chart</a></li>
            </ul>
            </h:form>
          </div><!--/.well -->
        </div><!--/span-->

		<div id="themes" class="span9 corner-theme">
          <h:form>
          	<ul class="nav nav-pills">
	            <li class="active"><h:commandLink action="#{showcase.selectDefaultTheme}" styleClass="tabLink" value="Default" /></li>
	            <li><h:commandLink action="#{showcase.selectGridTheme}" styleClass="tabLink" value="Grid" /></li>
	            <li><h:commandLink action="#{showcase.selectSkiesTheme}" styleClass="tabLink" value="Skies" /></li>
	            <li><h:commandLink action="#{showcase.selectGrayTheme}" styleClass="tabLink" value="Gray" /></li>
	            <li><h:commandLink action="#{showcase.selectDarkBlueTheme}" styleClass="tabLink" value="Dark Blue" /></li>
	            <li class="disabled"><a href="#" onclick="return false">Dark Green</a></li>
          	</ul>
          </h:form>
        </div><!--/span-->
 
        <div class="span9 corner-chart">
          <wc:chart id="chart" options="#{showcase.options}" theme="#{showcase.theme}" style="width: 100%"/>
          <br />
          <p><a id="showCodeButton" class="btn btn-primary pull-right" href="#"  data-toggle="modal" data-target="#codeDialog">Show Java code &#187;</a></p>
        </div><!--/span-->

		<div class="span9 corner-usage">
			<p>To add a chart to your JSF page, include the following HTML fragments into your code:</p>
<h3>Markup:</h3>
<blockquote>
<pre class="brush: xml">
&lt;!-- page.xhtml --&gt;
&lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:wc="http://googlecode.com/wickedcharts"&gt;
	&lt;body&gt;
		&lt;wc:chart id="chart1" options="<h:outputText value="#{showcase.optionsValue}" escape="false" />" theme="<h:outputText value="#{showcase.themeValue}" escape="false" />" /&gt;
		&lt;wc:chart id="chart2" options="<h:outputText value="#{showcase.optionsValue}" escape="false" />" themeUrlRef="<h:outputText value="#{showcase.themeUrlRefValue}" escape="false" />" /&gt;
		&lt;wc:chart id="chart3" options="<h:outputText value="#{showcase.optionsValue}" escape="false" />" themeUrlRef="js/myTheme.js" /&gt;
		&lt;wc:chart id="chart4" options="<h:outputText value="#{showcase.optionsValue}" escape="false" />" themeUrlRef="http://js.mySite.com/myTheme.js" /&gt;
	&lt;/body&gt;
&lt;/html&gt;
</pre>
</blockquote>
      </div>

		<div class="span9">
          <div id="codeDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="codeDialogHeader" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
              <h3 id="codeDialogHeader">Java code for this chart's configuration</h3>
            </div>
            <div class="modal-body">
              <pre id="code" class="brush: java">Here comes the code</pre>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div><!--/span-->

      </div><!--/row-->
      
      <hr />

      <footer>
        <p>&#169; Wicked Charts 2012-2019</p>
      </footer>

    </div><!--/.fluid-container-->
	<!-- Le javascript
    ================================================== -->    
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-button.js"></script>
    <script type="text/javascript" src="js/bootstrap-tab.js"></script>
	<script type="text/javascript" src="js/syntaxhighlighter/shCore.js"></script>
	<script type="text/javascript" src="js/syntaxhighlighter/shBrushJava.js"></script>
	<script type="text/javascript" src="js/syntaxhighlighter/shBrushXml.js"></script>
	<script type="text/javascript" src="js/wickedcharts.js"></script>

  </body>
</html>
